<template>
	<view class="session-item">
		<view class="session-avatar-container">
			<!-- 群聊头像 -->
			<view class="session-avatar" v-if="isGroup">
				{{sessionItemInfo.sessionName.charAt(0)}}
			</view>
			<!-- 私聊头像 -->
			<view class="session-avatar" v-else>
				<u-image width="100%" height="100%" border-radius="8" :src="sessionItemInfo.sessionAvatar" />
			</view>
			<u-badge type="error" :count="sessionItemInfo.unreadNum" />
		</view>
		<view class="session-main">
			<view class="session-title">
				<view class="session-name">
					<view class="session-name-value">
						{{sessionItemInfo.sessionName}}
					</view>
					<!-- 		<view class="session-consult-type" v-if="sessionItemInfo.consultTitle">
						{{sessionItemInfo.consultTitle}}咨询
					</view> -->
				</view>
				<view class="session-time">
					{{$utils.sessionTimeFormat(sessionItemInfo.time)}}
				</view>
			</view>
			<!-- 文本信息 -->
			<view class="session-content" v-if="sessionItemInfo.messageType == 'text'">
				<u-icon name="info-circle-fill" class="fail-message-icon" v-show="sessionItemInfo.error" />
				<text class="at-prompt" v-show="isShowAtPrompt">[有人@了您]</text>
				<text class="username" v-show="isGroup&&!isSender">{{sessionItemInfo.userName}}:</text>
				<view class="last-message-content"
					v-html="`<div style='overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width:100%;display:inline-block;'>${$utils.parseEmoji(sessionItemInfo.lastMsg)}</div>`">
				</view>
			</view>
			<!-- 图片信息 -->
			<view class="session-content" v-else-if="sessionItemInfo.messageType == 'image'">
				<u-icon name="info-circle-fill" class="fail-message-icon" v-show="sessionItemInfo.error" />
				<text class="at-prompt" v-show="isShowAtPrompt">[有人@了您]</text>
				<text class="username" v-show="isGroup">{{sessionItemInfo.userName}}:</text>
				<text class="last-message-content">[图片]</text>
			</view>
			<!-- 文件信息 -->
			<view class="session-content" v-else-if="sessionItemInfo.messageType == 'file'">
				<u-icon name="info-circle-fill" class="fail-message-icon" v-show="sessionItemInfo.error" />
				<text class="at-prompt" v-show="isShowAtPrompt">[有人@了您]</text>
				<text class="username" v-show="isGroup">{{sessionItemInfo.userName}}:</text>
				<text class="last-message-content">[文件]</text>
			</view>
			<!-- 语音信息 -->
			<view class="session-content" v-else-if="sessionItemInfo.messageType == 'voice'">
				<u-icon name="info-circle-fill" class="fail-message-icon" v-show="sessionItemInfo.error" />
				<text class="at-prompt" v-show="isShowAtPrompt">[有人@了您]</text>
				<text class="username" v-show="isGroup">{{sessionItemInfo.userName}}:</text>
				<text class="last-message-content">[语音]</text>
			</view>
			<!-- 定位信息 -->
			<view class="session-content" v-else-if="sessionItemInfo.messageType == 'location'">
				<u-icon name="info-circle-fill" class="fail-message-icon" v-show="sessionItemInfo.error" />
				<text class="at-prompt" v-show="isShowAtPrompt">[有人@了您]</text>
				<text class="username" v-show="isGroup">{{sessionItemInfo.userName}}:</text>
				<text class="last-message-content">[定位]</text>
			</view>
			<!-- 撤回信息 -->
			<view class="session-content" v-else-if="sessionItemInfo.messageType == 'withdraw'">
				<u-icon name="info-circle-fill" class="fail-message-icon" v-show="sessionItemInfo.error" />
				<text class="at-prompt" v-show="isShowAtPrompt">[有人@了您]</text>
				<text class="last-message-content">{{sessionItemInfo.userName}}撤回了一条消息</text>
			</view>
			<!-- 视频信息 -->
			<view class="session-content" v-else-if="sessionItemInfo.messageType == 'video'">
				<u-icon name="info-circle-fill" class="fail-message-icon" v-show="sessionItemInfo.error" />
				<text class="at-prompt" v-show="isShowAtPrompt">[有人@了您]</text>
				<text class="username" v-show="isGroup">{{sessionItemInfo.userName}}:</text>
				<text class="last-message-content">[视频]</text>
			</view>
			<!-- 服务评价 -->
			<view class="session-content" v-else-if="sessionItemInfo.messageType == 'service_evaluation'">
				<u-icon name="info-circle-fill" class="fail-message-icon" v-show="sessionItemInfo.error" />
				<text class="at-prompt" v-show="isShowAtPrompt">[有人@了您]</text>
				<text class="username" v-show="isGroup">{{sessionItemInfo.userName}}:</text>
				<text class="last-message-content">[服务评价]</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			sessionItemInfo: {
				type: Object,
				required: true,
			},
			wordKey: {
				type: String
			}
		},
		computed: {
			isGroup() {
				return this.sessionItemInfo.chatType == 'groupChat'
			},
			isSender() {
				return this.sessionItemInfo.senderId == uni.IM.userId
			},
			isShowAtPrompt() {
				if (!this.sessionItemInfo.atList) {
					return false
				} else {
					return this.sessionItemInfo.atList.indexOf(uni.IM.userId) != -1
				}

			},
		},
		data() {
			return {
				// sessionName: "未设置用户名",
				// sessionAvatar: '',
			}
		},
		mounted() {
			// this.getSessionExtensionInfo();
		},
		methods: {
			//获取会话扩张信息（头像，名称）
			async getSessionExtensionInfo() {
				if (this.isGroup) {
					const {
						data
					} = await uni.IM.getGroupInfo(this.sessionItemInfo.sessionId);
					this.sessionName = data[0].name;
				} else {
					//获取用户信息
					const {
						data
					} = await uni.IM.getSingleUserInfo(this.sessionItemInfo.sessionId);
					console.log(data);
					this.sessionName =
						data[this.sessionItemInfo.sessionId].nickname ? data[this.sessionItemInfo.sessionId].nickname :
						'未设置用户名';
					this.sessionAvatar =
						data[this.sessionItemInfo.sessionId].avatarurl;
				}
			},
			// jump() {
			// 	const sessionInfo = {
			// 		...this.sessionItemInfo,
			// 		sessionName: this.sessionName,
			// 		sessionAvatar: this.sessionAvatar,
			// 	}
			// 	this.$emit('setUnreadNum')
			// 	this.$u.route(`/pages/chat_detail/chatDetail?sessionInfo=${encodeURIComponent(JSON
			// 			.stringify(sessionInfo))}`)
			// }
		}
	}
</script>

<style scoped lang="scss">
	@import "./sessionItem.scss";
</style>
